<template>
  <div class="home">
    <!-- banner图 -->
    <div class="home_banner_iii">
      <div class="home_banner">
        <div class="banner_bgimg_content">
          <div class="banner_bgimg_h2">
            <h4>51出海 <br />海外引流增长与营销工具</h4>
          </div>
          <div class="banner_bgimg_p">
            <p>WhatsApp、Facebook、LINE、Telegram等多平台用户增长</p>
          </div>
          <div class="banner_bgimg_btn">免费试用</div>
        </div>
      </div>
    </div>

    <sidelink></sidelink>
    <!-- 我们可以帮您实现 realize-->
    <div class="realize">
      <div class="realize_warp">
        <div class="realize_top">
          <h4>我们可以帮您实现</h4>
        </div>
        <div class="realize_base">
          <div class="realize_item">
            <img
              class="realize_item_img"
              src="@/assets/Homepage_desktop/3D_global_get_user_img.png"
              alt=""
            />
            <div class="realize_item_conten">
              <h4>全球客户获取</h4>
              <div class="realize_item_con">
                获取全球指定地区活跃客户资源，进行有效广告曝光
              </div>
            </div>
          </div>
          <div class="realize_item">
            <img
              class="realize_item_img"
              src="@/assets/Homepage_desktop/fans_catch_img.png"
              alt=""
            />
            <div class="realize_item_conten">
              <h4>自动粉丝引流</h4>
              <div class="realize_item_con">
                获取全球指定地区活跃客户资源，进行有效广告曝光引导海外粉丝到指定平台，如电商平台、独立站、社交私域等
              </div>
            </div>
          </div>
          <div class="realize_item">
            <img
              class="realize_item_img"
              src="@/assets/Homepage_desktop/int_customer_service_img.png"
              alt=""
            />
            <div class="realize_item_conten">
              <h4>智能客户服务</h4>
              <div class="realize_item_con">
                搭载实时翻译、增长数据统计、智能辅助回复功能的技术服务
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 我们的产品 product-->
    <div class="product">
      <div class="product_warp">
        <div class="product_item_head">
          <h4>我们的产品</h4>
        </div>
        <ul class="product_item_head_ul">
          <li
            :class="{ fontColor: cur == i }"
            @click="fontClick(i)"
            v-for="(item, i) in homeDataList"
            :key="i"
          >
            {{ item }}
          </li>
        </ul>

        <div class="product_itm_bott" v-if="fontShow == 0">
          <div class="product_itm_bott_h">
            <h4>WhatsApp拓客系统</h4>
          </div>
          <div class="product_itm_bott_m">
            基于WhatsApp通过群发等功能帮助客户获客
          </div>

          <div class="product_itm_bott_warp">
            <!-- 左边图片 -->
            <div class="product_itm_bott_left">
              <img
                src="@/assets/Homepage_desktop/homepage_whatsapp_marketing_system_img.png"
                alt=""
              />
            </div>
            <!-- 右边内容 -->
            <div class="product_itm_bott_r">
              <div class="product_itm_bott_right">
                <div class="product_itm_bott_right_t">
                  <h4>全球智能获客</h4>
                  <div class="product_itm_bott_right_p">
                    指定地区号码生成，<br />智能筛选活跃WhatsApp用户
                  </div>
                </div>

                <div class="product_itm_bott_right_t">
                  <h4>推广消息群发</h4>
                  <div class="product_itm_bott_right_p">
                    日均10W+消息群发，多话术模板智能对话，提高转化率
                  </div>
                </div>

                <div class="product_itm_bott_right_t">
                  <h4>自动化养号</h4>
                  <div class="product_itm_bott_right_p">
                    大批量账号自动养号脚本，提高账号安全性
                  </div>
                </div>

                <div class="product_itm_bott_right_t">
                  <h4>API对接客服系统</h4>
                  <div class="product_itm_bott_right_p">
                    分配客服坐席，一控多号，快捷服务高效营销
                  </div>
                </div>
              </div>
              <div class="product_itm_bott_a">
                <a href="#">了解产品<span>&#8594;</span></a>
              </div>
            </div>
          </div>
        </div>

        <div class="product_itm_bott" v-if="fontShow == 1">
          <div class="product_itm_bott_h">
            <h4>Facebook拓客系统</h4>
          </div>
          <div class="product_itm_bott_m">
            基于Facebook拓客系统群发等功能帮助客户获客
          </div>

          <div class="product_itm_bott_warp">
            <!-- 左边图片 -->
            <div class="product_itm_bott_left">
              <img
                src="@/assets/Homepage_desktop/homepage_whatsapp_marketing_system_img.png"
                alt=""
              />
            </div>
            <!-- 右边内容 -->
            <div class="product_itm_bott_r">
              <div class="product_itm_bott_right">
                <div class="product_itm_bott_right_t">
                  <h4>全球智能获客</h4>
                  <div class="product_itm_bott_right_p">
                    指定地区号码生成，<br />智能筛选活跃WhatsApp用户
                  </div>
                </div>

                <div class="product_itm_bott_right_t">
                  <h4>推广消息群发</h4>
                  <div class="product_itm_bott_right_p">
                    日均10W+消息群发，多话术模板智能对话，提高转化率
                  </div>
                </div>

                <div class="product_itm_bott_right_t">
                  <h4>自动化养号</h4>
                  <div class="product_itm_bott_right_p">
                    大批量账号自动养号脚本，提高账号安全性
                  </div>
                </div>

                <div class="product_itm_bott_right_t">
                  <h4>API对接客服系统</h4>
                  <div class="product_itm_bott_right_p">
                    分配客服坐席，一控多号，快捷服务高效营销
                  </div>
                </div>
              </div>
              <div class="product_itm_bott_a">
                <a href="#">了解产品<span>&#8594;</span></a>
              </div>
            </div>
          </div>
        </div>

        <div class="product_itm_bott" v-if="fontShow == 2">
          <div class="product_itm_bott_h">
            <h4>51出海客服系统</h4>
          </div>
          <div class="product_itm_bott_m">
            基于51出海客服系统群发等功能帮助客户获客
          </div>

          <div class="product_itm_bott_warp">
            <!-- 左边图片 -->
            <div class="product_itm_bott_left">
              <img
                src="@/assets/Homepage_desktop/homepage_whatsapp_marketing_system_img.png"
                alt=""
              />
            </div>
            <!-- 右边内容 -->
            <div class="product_itm_bott_r">
              <div class="product_itm_bott_right">
                <div class="product_itm_bott_right_t">
                  <h4>全球智能获客</h4>
                  <div class="product_itm_bott_right_p">
                    指定地区号码生成，<br />智能筛选活跃WhatsApp用户
                  </div>
                </div>

                <div class="product_itm_bott_right_t">
                  <h4>推广消息群发</h4>
                  <div class="product_itm_bott_right_p">
                    日均10W+消息群发，多话术模板智能对话，提高转化率
                  </div>
                </div>

                <div class="product_itm_bott_right_t">
                  <h4>自动化养号</h4>
                  <div class="product_itm_bott_right_p">
                    大批量账号自动养号脚本，提高账号安全性
                  </div>
                </div>

                <div class="product_itm_bott_right_t">
                  <h4>API对接客服系统</h4>
                  <div class="product_itm_bott_right_p">
                    分配客服坐席，一控多号，快捷服务高效营销
                  </div>
                </div>
              </div>
              <div class="product_itm_bott_a">
                <a href="#">了解产品<span>&#8594;</span></a>
              </div>
            </div>
          </div>
        </div>

        <div class="product_itm_bott" v-if="fontShow == 3">
          <div class="product_itm_bott_h">
            <h4>海外引流推广</h4>
          </div>
          <div class="product_itm_bott_m">
            基于海外引流推广等功能帮助客户获客
          </div>

          <div class="product_itm_bott_warp">
            <!-- 左边图片 -->
            <div class="product_itm_bott_left">
              <img
                src="@/assets/Homepage_desktop/homepage_whatsapp_marketing_system_img.png"
                alt=""
              />
            </div>
            <!-- 右边内容 -->
            <div class="product_itm_bott_r">
              <div class="product_itm_bott_right">
                <div class="product_itm_bott_right_t">
                  <h4>全球智能获客</h4>
                  <div class="product_itm_bott_right_p">
                    指定地区号码生成，<br />智能筛选活跃WhatsApp用户
                  </div>
                </div>

                <div class="product_itm_bott_right_t">
                  <h4>推广消息群发</h4>
                  <div class="product_itm_bott_right_p">
                    日均10W+消息群发，多话术模板智能对话，提高转化率
                  </div>
                </div>

                <div class="product_itm_bott_right_t">
                  <h4>自动化养号</h4>
                  <div class="product_itm_bott_right_p">
                    大批量账号自动养号脚本，提高账号安全性
                  </div>
                </div>

                <div class="product_itm_bott_right_t">
                  <h4>API对接客服系统</h4>
                  <div class="product_itm_bott_right_p">
                    分配客服坐席，一控多号，快捷服务高效营销
                  </div>
                </div>
              </div>
              <div class="product_itm_bott_a">
                <a href="#">了解产品<span>&#8594;</span></a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 我们的优势 advantage-->
    <div class="realize advantage">
      <div class="realize_warp">
        <div class="realize_top advantage_top">
          <h4>我们的优势</h4>
        </div>
        <div class="realize_base">
          <div class="realize_item">
            <img
              class="realize_item_img"
              src="@/assets/Homepage_desktop/tecnology_team_img.png"
              alt=""
            />
            <div class="realize_item_conten advantage_item_conten">
              <h4>技术团队</h4>
              <div class="realize_item_con">
                深耕海外流量七年的技术团队，自主研发诸如Facebook、WhatsAPP、TikTok、Telegram、Instagram、Twitter等海外平台底层协议技术
              </div>
            </div>
          </div>
          <div class="realize_item">
            <img
              class="realize_item_img"
              src="@/assets/Homepage_desktop/marketing_system_img.png"
              alt=""
            />
            <div class="realize_item_conten advantage_item_conten">
              <h4>营销体系</h4>
              <div class="realize_item_con">
                51出海团队自搭建起一直在为海外引流营销实战商家提供服务，已累积了丰富的海外营销经验，为客户提供最专业的业务咨询
              </div>
            </div>
          </div>
          <div class="realize_item">
            <img
              class="realize_item_img"
              src="@/assets/Homepage_desktop/global_customerservice_img.png"
              alt=""
            />
            <div class="realize_item_conten advantage_item_conten">
              <h4>客户服务</h4>
              <div class="realize_item_con">
                我们非常注重客户的售后服务，无论客户位于全球任意时区，都可以随时找我们的客服对接解决问题
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 客户案例 -->
    <caseview></caseview>

    <pssea></pssea>

    <!-- 轮播新闻 -->
    <news-list :ldata="newslist"></news-list>
  </div>
</template>

<script>
import caseview from "@/components/case";
import newsList from "@/components/newslist";
import pssea from "@/components/pssea";
import sidelink from "@/components/sidelink";

export default {
  name: "home",
  components: {
    caseview,
    newsList,
    pssea,
    sidelink,
  },
  data() {
    return {
      cur: 0,
      fontShow: 0,
      //轮播新闻
      newslist: {
        theme: "出海资讯",
        list: [
          {
            img: require("@/assets/news.png"),
            title: "如何正确试用翻译软件，以下技巧请查阅后使用",
            date: "51客服系统,未分类 | 2021年11月23日",
            param:
              "51客服系统的WhatsApp、LINE客服聊天端，对接全球顶尖互联网公司翻译数据库，支持全球200+数语言互相翻译，系统自动侦测源语言，只需选择目标语言就可以完成全球语言的实时...",
          },
          {
            img: require("@/assets/news.png"),
            title: "如何正确试用翻译软件，以下技巧请查阅后使用",
            date: "51客服系统,未分类 | 2021年11月23日",
            param:
              "51客服系统的WhatsApp、LINE客服聊天端，对接全球顶尖互联网公司翻译数据库，支持全球200+数语言互相翻译，系统自动侦测源语言，只需选择目标语言就可以完成全球语言的实时...",
          },
          {
            img: require("@/assets/news.png"),
            title: "如何正确试用翻译软件，以下技巧请查阅后使用",
            date: "51客服系统,未分类 | 2021年11月23日",
            param:
              "51客服系统的WhatsApp、LINE客服聊天端，对接全球顶尖互联网公司翻译数据库，支持全球200+数语言互相翻译，系统自动侦测源语言，只需选择目标语言就可以完成全球语言的实时...",
          },
          {
            img: require("@/assets/news.png"),
            title: "如何正确试用翻译软件，以下技巧请查阅后使用",
            date: "51客服系统,未分类 | 2021年11月23日",
            param:
              "51客服系统的WhatsApp、LINE客服聊天端，对接全球顶尖互联网公司翻译数据库，支持全球200+数语言互相翻译，系统自动侦测源语言，只需选择目标语言就可以完成全球语言的实时...",
          },
        ],
      },
      bannerData: {
        cheight: "400px", //container的高度
        bgcolor:
          "-webkit-gradient(linear,0 0,100% 100%,from(#f0f8ff),to(#f8eeff))",
        bgimg: {
          backgroundSize: "400px auto",
          backgroundRepeat: "no-repeat",
          backgroundPosition: "72% 72%",
          backgroundImage:
            "url(" +
            require("@/assets/Product_page_whatsapp_desktop/top_page_whatsapp_bg.png") +
            ")",
        },
        bannertxt: {
          title: "51出海",
          titlet: "海外引流增长与营销工具",
          param: "WhatsApp、Facebook、LINE、Telegram等多平台用户增长",
        },
      },
      homeDataList: [
        "WhatsApp拓客系统",
        "Facebook拓客系统",
        "51出海客服系统",
        "海外引流推广",
      ],
    };
  },
  methods: {
    fontClick(i) {
      this.cur = i;
      this.fontShow = i;
    },
  },
};
</script>

<style scoped>
.fontColor {
  color: #192341;
}
.banner_bgimg_content {
  max-width: 1160px;
  margin: 0 auto;
  padding-left: 210px;
  overflow: hidden;
  padding-top: 7%;
}
/* banner部分 */
.liubai {
  opacity: 0;
}
.home_banner_iii{
  background-image: -webkit-gradient(
    linear,
    0 0,
    100% 100%,
    from(#f0f8ff),
    to(#f8eeff)
  );
}
.home_banner {
  padding-bottom: 17%;
  padding-left: 25px;
  background-image: url(../../assets/Homepage_desktop/toppage_img.png);
  background-repeat: no-repeat;
  background-position: 80% 47%;
  background-size: 30% auto;
}

.banner_bgimg_h2 {
  margin-top: 55px;
}

.banner_bgimg_h2 > h4 {
  font-size: 50px;
  color: #1d2845;
}

.banner_bgimg_p {
  width: 400px;
}

.banner_bgimg_p > p {
  font-size: 24px;
  color: #6f7b8e;
  padding: 50px 0;
}

.banner_bgimg_btn {
  margin-top: 40px;
  width: 300px;
  background: #077af1;
  color: #fff;
  font-size: 16px;
  text-align: center;
  outline: 1px solid #077af1;
  border-radius: 4px;
  cursor: pointer;
  padding: 11px 0;
}

/* 我们的产品 */
.product {
  background: #f8f8f8;
  padding-bottom: 50px;
}

.product_warp {
  max-width: 1160px;
  margin: 0 auto;
}

.product_item_head {
  padding-left: 60px;
  font-size: 30px;
  color: #1d2845;
  padding-top: 40px;
}

.product_item_head_ul {
  display: flex;
  justify-content: space-between;
  align-content: center;
  color: #6f7b8e;
  font-size: 16px;
  padding: 40px 60px;
  font-weight: bold;
}
.product_item_head_ul > li {
  cursor: pointer;
}

.product_itm_bott {
  border-radius: 8px;
  box-shadow: 0 0 20px #eee;
  background: #fff;
  padding: 60px;
}

.product_itm_bott_h > h4 {
  font-size: 24px;
  color: #1d2845;
  padding: 0 0 20px 0;
}

.product_itm_bott_m {
  color: #6f7b8e;
  font-size: 16px;
  padding-bottom: 40px;
}

.product_itm_bott_warp {
  display: flex;
  justify-content: space-between;
}

.product_itm_bott_left {
  width: 360px;
  height: 370px;
  margin-right: 60px;
}

.product_itm_bott_left > img {
  width: 360px;
  height: 370px;
}

.product_itm_bott_right {
  flex: 1;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.product_itm_bott_right_t {
  width: 280px;
  height: 150px;
}

.product_itm_bott_right_t > h4 {
  margin-bottom: 15px;
  font-size: 22px;
  color: #1d2845;
}

.product_itm_bott_right_p {
  line-height: 26px;
  color: #6f7b8e;
  font-size: 16px;
}

.product_itm_bott_a {
  margin-top: 47px;
}

.product_itm_bott_a > a {
  color: #077af1;
}

.product_itm_bott_a > a > span {
  padding-left: 10px;
}

/* 我们可以帮您实现 、 我们的优势 */
.realize {
  background: #0d7ef2;
  padding-bottom: 50px;
}

.advantage {
  background: #fff;
}

.realize_warp {
  max-width: 1160px;
  margin: 0 auto;
  text-align: center;
}

.realize_top {
  text-align: center;
  padding: 40px 0 106px 0;
  color: #fff;
  font-size: 30px;
}

.advantage_top {
  color: #1d2845;
}

.realize_base {
  display: flex;
  justify-content: space-between;
  padding: 0 15px;
}

.realize_item {
  width: 260px;
  border-radius: 8px;
  background: #fff;
  display: flex;
  justify-content: center;
  height: 220px;
  padding-top: 100px;
  align-content: center;
  position: relative;
}

.realize_item_img {
  position: absolute;
  width: 130px;
  top: -63px;
}

.realize_item_conten {
  width: 190px;
  height: 150px;
}

.advantage_item_conten {
  width: 100%;
}

.realize_item_conten > h4 {
  font-size: 24px;
  color: #1d2845;
  padding-bottom: 25px;
}

.realize_item_con {
  line-height: 25px;
  color: #6f7b8e;
}
</style>>
